<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>${_front_title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/static/favicon.ico"/>
    <link rel="stylesheet" href="/static/front/fonts/iconfont.css">
    <link rel="stylesheet" href="/static/front/css/base_new.css">
    <link rel="stylesheet" href="/static/front/css/library.css">
    <link rel="stylesheet" href="/static/front/css/style.css">
    <link rel="stylesheet" href="/static/front/css/hzw-city-picker.css">
    <script src="/static/front/js/jquery-1.11.1.min.js"></script>
    <script src="/static/front/js/jquery.countdown.js"></script>
    <script src="/static/front/js/hzw-city-picker.min.js"></script>
    <script src="/static/front/js/city-data.js"></script>
    <script src="/static/front/js/js.js"></script>
    <!--[if lt IE 9]>
    <script src="/static/front/js/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script type="text/javascript" src="plugIn/PIE.js"></script>
    <![endif]-->
    
    <style>
    	.result a{color: #555;}
    	.result a:hover{color: #4aaef2;}
    	
    	.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;_padding:0 20px 0 0;background:#f6f4f5;display:none;}
		.showbox{position:fixed;top:0;left:50%;z-index:9999;opacity:0;filter:alpha(opacity=0);margin-left:-80px;}
		*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
		*html .showbox,*html .overlay{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
		#AjaxLoading{border:1px solid #8CBEDA;color:#37a;font-size:12px;font-weight:bold;}
		#AjaxLoading div.loadingWord{width:200px;height:50px;line-height:50px;border:2px solid #D6E7F2;background:#fff;}
		#AjaxLoading img{margin:10px 15px;float:left;display:inline;}
    </style>
</head>

<body>
	<div class="content">
		<#include "../base/top.ftl" />
		<div id="rechargeMain" class="cnt clearfix mainLayoutRight layoutMain">
			<#include "base1.ftl" />
			<!-- 中间内容Start -->
		 	<div class="fr iWantToRecharge iWantTo" id="thirdPartyAccount">
	            <h4><em>第三方托管</em></h4>
	            <div class="">
	                <ul class="tabList clearfix" style="margin-top:106px;">
	                    <li class="hover" id="march1">实名认证<em style="cursor:pointer;">1</em></li>
	                    <li id="march2">绑定银行卡<em style="cursor:pointer;">2</em></li>
	                    <li id="march3">设置密码<em style="cursor:pointer;">3</em></li>
	                    <li id="march4">开设托管<em>4</em></li>
	                </ul>
	                
	                 <div class="tab userMain user" id="div1">
	                    <form class="userFrom registerform" method="post">
	                        <div class="optionCity clearfix FU">
	                            <label for="optionCity" class="fl"><em>*</em> 真实姓名：</label>
	                            <input type="text" id="realName" class="fl" placeholder="请输入真实姓名" <#if user?? && user.realname?exists>value="${user.realname!}"</#if>>
	                        </div>
	                        <div class="cardNo clearfix FU">
	                            <label for="cardNo" class="fl"><em>*</em> 身份证号：</label>
	                            <input type="text" id="idCardNo" class="fl" placeholder="请输入身份证号" <#if userAuth?? && userAuth.authName?exists>value="${userAuth.authName!}"</#if>>
	                        </div>
	                        <input class="regsiterBtn" type="button" value="下一步" id="nextOne">
	                    </form>
	                </div>
	                
	                <div class="tab userMain user" style="display:none;" id="div2">
	                    <form class="userFrom registerform" method="post">
	                        <div class="optionCity clearfix FU">
	                            <label for="optionCity" class="fl"><em>*</em> 选择开户省市：</label>
	                            <input type="text" id="optionCity"  class="fl" placeholder="点击输入框选择城市" style="cursor:default;" readonly="readonly" <#if bankCityName?exists>value="${bankCityName!}"</#if>>
	                        </div>
	                        <div class="optionBankName clearfix FU">
	                            <label for="optionBankName" class="fl"><em>*</em> 选择开户行名称：</label>
	                            <!--<input type="text" id="optionBankName" class="fl" placeholder="洪山广场中信支行">-->
	                            <select class="fl" id="optionBank" style="padding-left:16px;margin-left:16px;font-size:14px;height:34px;width:268px;">
	                            	<option value="">请选择开户行</option>
	                            	<#list banks as model>
	                            		<option value="${model.code!}" <#if bankCard?? && bankCard.bankName = model.code>selected="selected"</#if>>${model.name!}</option>
	                            	</#list>
	                            </select>
	                        </div>
	                        <div class="cardNo clearfix FU">
	                            <label for="cardNo" class="fl"><em>*</em> 输入银行卡号：</label>
	                            <input type="text" id="cardNo" class="fl" placeholder="请输入银行卡号" <#if bankCard?? && bankCard.cardNo?exists>value="${bankCard.cardNo!}"</#if>>
	                        </div>
	                        <input class="regsiterBtn" type="button" value="下一步" id="nextTwo">
	                    </form>
	                </div>
	                
	                <div class="tab userMain user" style="display:none;" id="div3">
	                    <form class="userFrom registerform" method="post">
	                        <div class="optionCity clearfix FU">
	                            <label for="optionCity" class="fl"><em>*</em> 设置富友登录密码：</label>
	                            <input type="password" id="loginPassword" style="width:300px;" class="fl" placeholder="由不少于8位的字母和数字混合组成，支持“_”">
	                        </div>
	                        <div class="optionBankName clearfix FU">
	                            <label for="optionBankName" class="fl"><em>*</em> 确认富友登录密码：</label>
	                            <input type="password" id="reLoginPassword" style="width:300px;" class="fl" placeholder="由不少于8位的字母和数字混合组成，支持“_”">
	                        </div>
	                        <div class="cardNo clearfix FU">
	                            <label for="cardNo" class="fl"><em>*</em> 富友交易密码：</label>
	                            <input type="password" id="payPassword"  style="width:300px;" class="fl" placeholder="由不少于8位的字母和数字混合组成，支持“_”">
	                        </div>
	                        <div class="cardNo clearfix FU">
	                            <label for="cardNo" class="fl"><em>*</em> 确认富友交易密码：</label>
	                            <input type="password" id="rePayPassword"  style="width:300px;" class="fl" placeholder="由不少于8位的字母和数字混合组成，支持“_”">
	                        </div>
	                        <input class="regsiterBtn"  style="width:320px;" type="button" value="下一步" id="nextThree">
	                    </form>
	                </div>

	                <div class="tab userMain user" style="display:none;" id="div4">
	                    <div class="demo">
	                    	<a style="padding: 10px;cursor: pointer;border: #4db0c2 1px solid;background: #5dc0d2;color: #fff;border-radius: 3px;" class="action" onclick="fuionRegister()">开通富友托管</a>
	                    </div>
	                    <div class="result" style="display:none">
	                    	<span class="success" style="display: inherit;font-size: 18px;">恭喜您，开户成功 ！ <a href="/account/info">查看我的账户</a></span>
	                    	<span class="error" style="display: inherit;font-size: 18px;">开户失败，错误代码：</span>
	                    	<span class="error-href" style="display: inherit;font-size: 18px;"><a href="https://open.fuiou.com/jzh/errorCodeList.do" target="_blank">查看错误代号的具体原因</a></span>
	                    </div>
	                    
	                    <div class="overlay"></div>

						<div id="AjaxLoading" class="showbox">
						    <div class="loadingWord"><img src="/static/front/images/waiting.gif">富友开户中，请稍候...</div>
						</div>
						
						<div style="height:200px;">
    
						</div>
	                </div>	  
	                              
	            </div>
	        </div>
		 	<!-- 中间内容End -->
		</div>
		<div id="footer">
			<div class="content">      
				<#include "../base/foot.ftl" />
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="${_front_js}/layer/layer.js" ></script>
<script>
$(document).ready(function(){
    
    var h = $(document).height();
    $(".overlay").css({"height": h });  
    
});
</script>

<script>
//插件初始化启动

var cityPicker = new HzwCityPicker({
    data: data,
    target: 'optionCity',
    valType: 'k',
    hideCityInput: {
        name: 'city',
        id: 'city'
    },
    hideProvinceInput: {
        name: 'province',
        id: 'province'
    },
    callback: function(){ 
    }
});
cityPicker.init();


$("#city").val(${city!});
$("#province").val(${province!});
	        
nextTemp(${next});

//第一个下一步 实名认证
$("#nextOne").click(function(){
	var realName = $("#realName").val();
	var idCardNo = $("#idCardNo").val();
	if(realName == "" || realName == null){
		layer.alert("真实姓名不能为空！");
		return;
	}
	if(idCardNo == "" || idCardNo == null){
		layer.alert("身份证号不能为空！");
		return;
	}
	$.ajax({
        type: 'POST',
        dataType: 'JSON',
        async:'false',
        url:'/auth/nextOne',
        data:{
        	'realName':realName,
        	'idCardNo':idCardNo
        },
        success: function(result){
			if(result.code == -1) {
				//alert(result.msg);
				nextTemp(2);
			}else {
				layer.alert(result.msg);
			}
        }
    });
});
//第二个下一步
$("#nextTwo").click(function(){
	var cityCode = $("#city").val();
	var bankCode = $("#optionBank").val();
	var cardNo = $("#cardNo").val();
	if(cityCode == "" || cityCode == null){
		layer.alert("开户省市不能为空！");
		return;
	}
	if(bankCode == "" || bankCode == null){
		layer.alert("开户行名称不能为空！");
		return;
	}
	if(cardNo == "" || cardNo == null){
		layer.alert("银行卡号不能为空！");
		return;
	}
	
	$.ajax({
        type: 'post',
        dataType: 'JSON',
        async:'false',
        url: '/auth/nextTwo',
        data:{
        	'cityCode':cityCode,
        	'bankCode':bankCode,
        	'cardNo':cardNo
        },
        success: function(result){
			if(result.code == -1) {
				//alert(result.msg);
				var dealPassword = "<#if user?exists>${user.dealPassword!}</#if>";
				var loginPassword = "<#if user?exists>${user.loginPassword!}</#if>";
				if(dealPassword != "" && loginPassword != ""){
					nextTemp(4);
				}else {
					nextTemp(3);
				}
			}else {
				alert(result.msg);
			}
        }
    });
});
//第三个下一步
$("#nextThree").click(function(){
	var loginPassword = $("#loginPassword").val();
	var reLoginPassword = $("#reLoginPassword").val();
	var payPassword = $("#payPassword").val();
	var rePayPassword = $("#rePayPassword").val();
	if(loginPassword == "" || loginPassword == null) {
		layer.alert("富友登录密码不能为空！");
		return;
	}
	var reg = /((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))^.{8,16}$/;
	if(!reg.test(loginPassword)){
		layer.alert("富友登录密码必须是字母+数字 8--16位！");
		return;
	}
	if(reLoginPassword == "" || reLoginPassword == null) {
		layer.alert("确认富友登录密码不能为空！");
		return;
	}
	if(loginPassword != reLoginPassword) {
		layer.alert("两次输入的富友登录密码不同！");
		return;
	}
	if(payPassword == "" || payPassword == null) {
		layer.alert("富友交易密码不能为空！");
		return;
	}
    if(!reg.test(payPassword)){
		layer.alert("富友交易密码必须是字母+数字 8--16位！");
		return;
	}
	if(rePayPassword == "" || rePayPassword == null) {
		layer.alert("确认富友交易密码不能为空！");
		return;
	}
	if(payPassword != rePayPassword) {
		layer.alert("两次输入的富友交易密码不同！");
		return;
	}
	$.ajax({
        type: 'post',
        dataType: 'JSON',
        async:'false',
        url: '/auth/nextThree',
        data:{
        	'loginPassword':loginPassword,
        	'payPassword':payPassword
        },
        success: function(result){
			if(result.code == -1) {
				nextTemp(4);
			}else {
				layer.alert(result.msg);
			}
        }
    });
});

function fuionRegister(){
 	
	    $(".overlay").css({'display':'block','opacity':'0.8'});
	    
	    $(".showbox").stop(true).animate({'margin-top':'300px','opacity':'1'},200);
    
   
	$.ajax({
        type: 'post',
        dataType: 'JSON',
        async:'false',
        url: '/fuion/register',
        data:{
        	'userId':${_user.id}
        },
        success: function(result){
	        setTimeout(function(){
	                $(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);
	        
	        		$(".overlay").css({'display':'none','opacity':'0'});
	        		
	        		if(result.code == -1) {
						$(".demo a").hide();
						$(".result").show();
						$(".result .error").hide();
						$(".result .error-href").hide();
						window.location.href="/account/info";
					}else {
						var code=result.entity;
						$(".demo a").hide();
						$(".result").show();
						$(".result .error").append(code);
						$(".result .success").hide();			
						
					}
	        },3000);
	        

        }
    });
}

function nextTemp(no) {
	$("#div1").hide();
	$("#div2").hide();
	$("#div3").hide();
	$("#div4").hide();
	$("#div"+no).show();
	clearHover();
	changeHover(no);
}
function clearHover(){
	$("#march1").removeClass("hover");
	$("#march2").removeClass("hover");
	$("#march3").removeClass("hover");
	$("#march4").removeClass("hover");
}
function changeHover(no){
	if(no ==1) {
		$("#march1").addClass("hover");
	}else if(no ==2) {
		$("#march1").addClass("hover");
		$("#march2").addClass("hover");
	}else if(no ==3) {
		$("#march1").addClass("hover");
		$("#march2").addClass("hover");
		$("#march3").addClass("hover");
	}else if(no ==4) {
		$("#march1").addClass("hover");
		$("#march2").addClass("hover");
		$("#march3").addClass("hover");
		$("#march4").addClass("hover");
	}
}
$(".tabList li em").click(function(){
	var index = $(this).text();
	if(index ==4) return;
	nextTemp(index);
});
</script>
</html>